<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2350300097 万朗</title>
    <link rel="stylesheet" href="./css/dataTable.css">
</head>
<body>
    <div class="container">
        <h1>数据管理</h1>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <a href="index.jsp" class="btn btn-secondary">返回数据表</a>
            <button class="btn btn-primary" onclick="showAddModal()">添加新记录</button>
        </div>
        
        <!-- 数据表格 -->
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>身份信息</th>
                        <th>生日</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="crudTableBody">
                    <tr>
                        <td colspan="6" class="loading">正在加载数据...</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination-container">
            <div class="pagination" id="crudPagination">
                <!-- 分页按钮将通过JavaScript动态生成 -->
            </div>
            
            <!-- 页面信息显示 -->
            <div class="page-info" id="crudPageInfo">
                <!-- 页面信息将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <!-- 错误信息 -->
        <div id="errorMessage" class="error" style="display:none;"></div>
        
        <!-- 成功信息 -->
        <div id="successMessage" class="success" style="display:none;"></div>
    </div>

    <!-- 添加/编辑记录模态框 -->
    <div id="recordModal" class="modal" style="display:none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加新记录</h3>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form id="recordForm">
                    <input type="hidden" id="recordId" name="id">

                    <div class="form-group">
                        <label for="recordName">姓名:</label>
                        <input type="text" id="recordName" name="name" required>
                    </div>

                    <div class="form-group">
                        <label for="recordNumber">性别:</label>
                        <select id="recordNumber" name="number" required>
                            <option value="">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="recordPrice">身份信息:</label>
                        <input type="text" id="recordPrice" name="price" required placeholder="如：学生、教师、工程师等">
                    </div>

                    <div class="form-group">
                        <label for="recordMadetime">生日:</label>
                        <input type="date" id="recordMadetime" name="madetime" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="saveRecord()">保存</button>
                <button class="btn btn-secondary" onclick="closeModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteModal" class="modal" style="display:none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <span class="close" onclick="closeDeleteModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p>确定要删除这条记录吗？此操作不可撤销。</p>
                <p id="deleteRecordInfo"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
                <button class="btn btn-secondary" onclick="closeDeleteModal()">取消</button>
            </div>
        </div>
    </div>

    <script src="./js/crud.js"></script>
</body>
</html>
